<template>
    <div class="container">
        <div class="header">
            <NavBar title="快递认领" left-arrow color="#333333" @click-left="back" @click-right="backHome">
                <template #right>
                <Icon name="wap-home-o" size="20" />
                </template>
            </NavBar>
        </div>
        <div class="main">
            <div class="list">
                <div class="item flex align-items space-between" v-for='(item,idx) in list' :key='idx' @click='openRenling(idx)'>
                    <div class="left">
                        <img :src="item.img_url" alt="">
                    </div>
                    <div class="right flex1">
                        <div class="top flex align-items space-between">
                            <div class="txt flex1">{{ item.express_name }}</div>
                            <div class="btn fn-ctr">认领</div>
                        </div>
                        <div class="nums">运单编号：{{ item.sn }}</div>
                        <div class="time">送达时间：{{ item.service_time }}</div>
                    </div>
                </div>
            </div>
        </div>
         <!-- 增值服务弹窗 -->
        <ActionSheet v-model="show" title="填写单号">
            <div class="layers">
                <Field
                    v-model="expressName"
                    label="运输公司"
                    placeholder="输入框运输公司"
                    input-align="right"
                    disabled
                ></Field>
                <Field
                    v-model="expressfic"
                    label="运单号"
                    placeholder="输入框运单号"
                    input-align="right"
                    disabled
                ></Field>
                <Field
                    v-model="expressreal"
                    label="完整运单号"
                    placeholder="请填写完整运单编号"
                    input-align="right"
                ></Field>
                <div class="bottom">
                    <Button  type="info" block @click='submit'>提交</Button>
                </div>
            </div>
        </ActionSheet>
       <Popup v-model="isSuccess">
           <div class="layer-suc">
                <img class="sucpic" :src="rlSuc" alt="">
                <div class="txt">验证成功</div>
                <div class="btna fn-ctr" @click='renlingSucc'>确定</div>
           </div>
       </Popup>
       <Empty v-show='noData' description="暂无可以认领的包裹" />
    </div>
</template>

<script>
    import { NavBar , Icon ,
       Button,
      Field, 
      ActionSheet,
      Popup,
      Empty,
    } from 'vant';
    import goods from '@/assets/banner2.png';
    import rlSuc from '@/assets/rl_suc.png';
    import { getRenLing , submitRenling } from '@/model/api';
    export default {
        components:{NavBar,Icon,ActionSheet,Button,Field,Popup,Empty},
        data(){
            return {
                goods,rlSuc,
                show:false,
                expressName:"顺丰速运",
                expressfic:"1258********187",
                expressreal:"",
                isSuccess:false,
                list:[],
                idx:0,
                noData:false,
            }
        },
        methods:{
            openRenling(idx){
                var target = this.list[idx];
                this.idx = idx;
                this.expressName = target.express_name;
                this.expressfic = target.sn;
                this.$nextTick(() => {
                    this.show = true;
                })
            },
            async submit(){
                if(this.expressreal == ""){
                    this.$toast("请输入完整")
                    return false
                }
                var target =  this.list[this.idx];
                let { code , data , msg } = await submitRenling({
                    id:target.id,
                    express_sn:this.expressreal,
                })
                this.expressreal = "";
                if(code == 1){
                    this.show = false;
                    this.isSuccess = true;
                }else{
                    this.$toast({
                        type:"fail",
                        message:msg,
                    })
                }
                this.noData = this.list.length == 0;
            },
            renlingSucc(){
                this.$router.go(-1);
            }
        },
        async created(){
            let { code , data } = await getRenLing();
            if(code == 1){
                this.list = data;
            }
        }
    }
</script>

<style lang="less" scoped>
    .layer-suc{
        width: 330px;
        height: 235px;
        background: #FFFFFF;
        border-radius: 5px;
        .sucpic{
            width: 127px;
            height:127px;
            margin: 17px auto 0;
        }
        .txt{
            width: 100%;
            height: auto;
            text-align: center;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
        }
        .btna{
            width: 140px;
            height: 31px;
            background: #5652FF;
            border-radius: 5px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            margin: 20px auto 0;
        }
    }
    
    
    .layers{
        width: 100%;
        border-top: 1px solid #EEEEEE;
        .bottom{
             width: 100%;
             padding: 10px 14px;
        }
    }
    .list{
        width: 100%;
        height: auto;
        padding-top: 5px;
        .item{
            width: 347px;
            height: 94px;
            background-color: #fff;
            margin: 0 auto 5px;
            border-radius: 5px;
            overflow: hidden;
            .left{
                width: 94px;
                height:94px;
                margin-right: 13px;
            }
            .right{
                height:auto;
                overflow: hidden;
                padding-right: 10px;
                .top{
                    width: 100%;
                    .txt{
                        font-size: 14px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #222222;
                    }
                    .btn{
                        width: 41px;
                        height:auto;
                        padding: 3px 0;
                        background: #5652FF;
                        box-shadow: 0px 2px 7px 0px rgba(86, 82, 255, 0.44);
                        border-radius: 5px;
                        margin: 0;
                        line-height: normal;
                        font-size: 12px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                    }
                }
                .nums{
                    width: 100%;
                    margin: 6px 0 10px;
                    font-size: 12px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }
                .time{
                    width: 100%;
                    font-size: 12px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #999999;
                }
            }
        }
    }
</style>